<!doctype html>
<html >
<head>
	<meta charset="UTF-8">
	<title>任务列表-RPA机器人工作台</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="stylesheet" href="/rpa_work/static/css/xadmin.css?v=1.01">
    <script type="text/javascript" src="/rpa_work/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/rpa_work/static/js/jquery.cookie.js"></script>
    <script src="/rpa_work/static/layui/layui.js?v=2.6.8" charset="utf-8"></script>
    <script>var page="tasklist";</script>
	<script type="text/javascript" src="/rpa_work/static/js/xadmin.js?v=1.0"></script>
	<script type="text/javascript" charset="utf-8" src="/rpa_work/static/js/xm-select.js"></script>
    <script type="text/javascript" src="/rpa_work/static/js/target_window.js"></script>
</head>
    <body>
	<div class="refreshdata layui-hide"><span id="timeout">3</span>秒后刷新数据 </div>
        <div class="x-body">
        
		<div class="layui-card">
		  <div class="layui-card-body">
		    	<div class="layui-row">
					<form class="layui-form layui-col-md12 x-so layui-form-pane" method="get" id="myform" lay-filter="searchform">
                      <div class="form-item layui-inline">
                        <label class="layui-form-label">任务名称</label>
                        <div class="layui-input-block">
                          <input type="text" name="flow_name" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                        </div>
                      </div>
					  <div class="form-item layui-inline">
                          <div class="layui-input-inline">
                          <a class="layui-btn"  lay-submit="" lay-filter="search" id="searchbtn">查询</a>
                          </div>
                      </div>
            <div class="form-item layui-inline layui-hide">
              <div class="layui-input-inline">
                <input type="checkbox" name="" id="refreshdatabtn" lay-skin="switch" lay-filter="refreshdata" lay-text="停止刷新|自动刷新" checked>
              </div>
            </div>
					</form>
				</div>
		
		
			<table class="layui-hide" lay-data="{id: 'list_table'}" id="list_table" lay-filter="list_table"></table>
		  </div>
		</div>
        </div>
		
		<script type="text/html" id="rightbar">
		<div id="btn-{{d.flow_id}}" class="layui-inline" style="vertical-align: top;">
		{{#  if(d.flow_status ==0){ }}
		 <button class="layui-btn layui-btn-sm " lay-event="stop"><i class="layui-icon layui-icon-pause"></i>停止</button>
		{{#  } else{ }}
		<button class="layui-btn layui-btn-sm" lay-event="run"><i class="layui-icon layui-icon-play"></i>开始</button>
		{{#  } }}
		</div>
			<button class="layui-btn layui-btn-sm" lay-event="log">运行记录</button>
		</script>
        <script type="text/html" id="progress">
		<div class="progress" id="progress-{{d.flow_id}}"></div>
		</script>
		<script>
	    layui.use(['form','laypage','layer','table'], function(){
                $ = layui.jquery;//jquery
              var layer = layui.layer;//弹出层
			  var form = layui.form;
			  var table = layui.table;
			  var refreshdata;
			  var refreshtime=5;

			  var xtable=table.render({
				elem: '#list_table'
				,height: 600
				,cellMinWidth: 60
				,url: apiurl+'Quest_list'
				,method:'post'
				,contentType: 'application/json'
				,where: {'sid': sid}
				,response: {
				  statusName: 'status'
				} 
				,page: true
				//,size:'lg'
				,page: { 
				  layout: ['count', 'prev', 'page', 'next', 'refresh']
				  ,groups: 5 
				  ,first: true
				  ,last: true
				  ,limit:100
				  ,first: '首页'
				  ,last: '尾页'
				}
				,cols: [[ //表头
				  {field: 'flow_name', title: '任务名称',align:'center',minWidth:150},
				  {field: 'progress', title: '进度',align:'center',templet:'#progress'},
				  {field: '', title: '操作',align:'center',toolbar: '#rightbar',minWidth:220},
				]]
				,done: function(res, curr, count){
				  	checklogin(res);
					let ids = res.data.map(item => item.flow_id);
					//console.log(ids);
                    $.ajax({
                        url: apiurl+"FlowRunningRecord",
                        type: 'POST',
                        dataType: 'json',
                        data: JSON.stringify({'sid':sid,'flow_id_list':ids}),
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        success: function(r) {
							if(r.status==0){
								$.each(r.data, function(index, p) {
									$('#progress-'+p.id ).html(p.progress);
								});
							 }else{
								 layer.msg('获取进度失败：'+r.msg);
							 }
                        },
                        error: function(xhr, status, error) {
                            layer.msg(error);
                        }
                    });
					$('#refreshdatabtn').prop('checked',true);
					form.render('checkbox', 'searchform');
                    //定时3s刷新一次表格
                    if(refreshdata !=null ){
                        clearInterval(refreshdata);
                    }
                    let countdown;
                    countdown=refreshtime;
                    $('#timeout').html(countdown);

                    refreshdata = setInterval(function() {
                        //console.log(countdown);
                        countdown--;
                         $('#timeout').html(countdown);
                         if(countdown==0){
                            $('#searchbtn').click();
                            clearInterval(refreshdata);
                         }
                    }, 1000);
				}
			  });
			  

			    table.on('tool(list_table)', function(obj){
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象
					 
					switch(layEvent){
					  case 'log':
						 x_admin_show('运行记录','/rpa_work/static/page/tasklog.html?taskid='+data.flow_id);
					  break;
					  case 'stop':
							layer.confirm('确定要停止任务吗？',function(index){
								  $.ajax({
									url: apiurl+"stop_flow",
									type: 'POST',
									dataType: 'json',
									data: JSON.stringify({'flow_id':data.flow_id,'robot_id':data.robot_id,'sid':sid}),
									headers: {
										'Content-Type': 'application/json'
									},
									success: function(r) {
										if(r.status==0){
											layer.msg('任务停止成功', {icon: 1});
											$("#btn-"+data.flow_id).html('<a class="layui-btn layui-btn-sm" lay-event="run"><i class="layui-icon layui-icon-play"></i>开始</a>');
										}else{
											checklogin(r);
											//layer.msg('停止失败：'+r.msg,{icon: 5,time:1000});
											layer.alert('停止失败：'+r.msg, {icon: 5});
										}
									},
									error: function(xhr, status, error) {
										//layer.msg('停止失败：'+error);
										layer.alert('停止失败：接口异常'+error, {icon: 5});
									}
								});
							
							   
							});
					  break;
					  case 'run':
							layer.confirm('确定要启动任务吗？',function(index){
								  $.ajax({
									url: apiurl+"start_flow",
									type: 'POST',
									dataType: 'json',
									data: JSON.stringify({'flow_id':data.flow_id,'robot_id':data.robot_id,'sid':sid}),
									headers: {
										'Content-Type': 'application/json'
									},
									success: function(r) {
										if(r.status==0){
											layer.msg('任务启动成功', {icon: 1});
											$("#btn-"+data.flow_id).html('<a class="layui-btn layui-btn-sm" lay-event="stop"><i class="layui-icon layui-icon-pause"></i>停止</a>');
										}else{
											checklogin(r);
											//layer.msg('启动失败：'+r.msg,{icon: 5,time:3000});
											layer.alert('启动失败：'+r.msg, {icon: 5});
										}
									},
									error: function(xhr, status, error) {
									console.log(xhr);console.log(status);console.log(error);
										//layer.msg('启动失败：'+error);
										layer.alert('启动失败：接口异常'+error, {icon: 5});
									}
								});
							
							   
							});
					  break;
					  
					 
					}
				});
      form.on('switch(refreshdata)', function (data) {
        if (data.elem.checked) {
          $('#searchbtn').click();
        } else {
          clearInterval(refreshdata);
        }
      });
				form.on('submit(search)', function(data){
					let postdata=data.field;
					postdata.sid=sid;
					table.reload('list_table', {
					  url: apiurl+'Quest_list'
					  ,contentType: 'application/json'
					  ,where: postdata
					  ,page: {
						layout: ['count', 'prev', 'page', 'next', 'refresh']
				        ,curr: 1
					  }
					});
				   
					return false;
				  });
              
            });

		
       </script>
    </body>
</html>